<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>已授权用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">平台ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userId" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">员工姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="realName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 确定添加 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/common/common.js" charset="utf-8"></script>
<script>
    window.onload=function(){
        let roleId = GetQueryString("roleId");
        if(isNotNull(roleId)){
            init(roleId);
        }else{
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        }
    }

    function init(roleId){
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            table.render({
                elem: '#currentTableId',
                url: '/role/authUser/unallocatedList',
                method: 'POST',
                contentType: 'application/json',
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                cols: [[
                    {type: "checkbox"},
                    {
                        field: 'numbering', title: '序号', width: 60, align: 'center', templet: function (d) {
                            return d.LAY_INDEX; //返回序号
                        }
                    },
                    {field: 'userId', title: '平台ID', sort: true, align: 'center'},
                    {field: 'realName', title: '员工姓名', sort: true, align: 'center'},
                    {
                        field: 'identity', title: '员工身份', sort: true, align: 'center', templet: function (d) {
                            if (d.identity === '0') {
                                return '管理员'
                            } else if (d.identity === '1') {
                                return '推广员'
                            } else if (d.identity === '2') {
                                return '客服'
                            } else {
                                return d.identity
                            }
                        }
                    },
                    {field: 'quickPay', title: '快捷支付', sort: true, align: 'center', templet: function (d) {
                            if(d.quickPay == 0){
                                return '<div style="color: #00ba00">是<div/>'
                            } else {
                                return '<div style="color: red">否<div/>'
                            }
                        }},
                    {field: 'status', title: '登陆权限', sort: true, align: 'center', templet: function (d) {
                            if(d.status == 0){
                                return '<div style="color: #00ba00">是<div/>'
                            } else {
                                return '<div style="color: red">否<div/>'
                            }
                        }},
                    {field: 'createTime', title: '创建时间', sort: true, align: 'center'}
                ]],
                limits: [5, 10],
                limit: 5,
                page: true,
                where: {roleId: roleId,},
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                response: { //定义后端 json 格式，详细参见官方文档
                    statusName: 'code', //状态字段名称
                        statusCode: '200', //状态字段成功值
                        msgName: 'msg', //消息字段
                        countName: 'total', //总数字段
                        dataName: 'rows' //数据字段
                },
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: data.field
                }, 'data');

                return false;
            });

            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    let checkStatus = table.checkStatus('currentTableId')
                        , data = checkStatus.data;
                    if(data.length > 0){
                        layer.confirm('确定添加到角色中吗', function (index) {
                            let userIds = ""
                            for (const i in data) {
                                if(userIds != ""){
                                    userIds += "," + data[i].userId;
                                }else{
                                    userIds = data[i].userId;
                                }
                            }
                            let obj = {roleId: roleId,userId:userIds}
                            $.ajax({
                                type:"post",
                                url:'/role/authUser/selectAll',
                                data:JSON.stringify(obj),
                                dataType:'json',
                                contentType: 'application/json',
                                success:function(req){
                                    layer.msg("授权成功");
                                    layer.close(index);
                                    // 关闭弹出层
                                    setTimeout(function () {
                                        let iframeIndex = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(iframeIndex);
                                    }, 1500);
                                },
                                error:function(e){
                                    layer.msg("出错啦");
                                }
                            })
                            layer.close(index);
                        });
                    }else{
                        layer.alert('请至少选中一行数据');
                    }
                }
            });

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                console.log(obj)
            });

        });
    }

    /**
     * 重载表格数据
     */
    function reloadTable() {
        layui.use(['table'], function () {
            let table = layui.table;
            table.reload('currentTableId', {
                url: '/role/authUser/unallocatedList'
            });
        })
    }
</script>

</body>
</html>
